import React, { Component, Suspense } from 'react'
import { Route, Link } from 'react-router-dom'

export default class index extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/home/message/detail/1">message001</Link>
          </li>
          <li>
            <Link to="/home/message/detail/2">message002</Link>
          </li>
          <li>
            <Link to="/home/message/detail/3">message003</Link>
          </li>
        </ul>
        <button
          onClick={() => {
            this.props.history.push('/home/message/detail/4')
          }}
        >
          添加
        </button>
        <button
          onClick={() => {
            this.props.history.replace('/home/message/detail/5')
          }}
        >
          替换
        </button>
        {/* <Detail></Detail> */}
        {/* <Route path="/home/message/detail/:id" component={Detail}></Route> */}
        <Suspense
          fallback={
            <div style={{ fontSize: 40, color: 'red' }}>正在加载请稍后...</div>
          }
        >
          {this.props.child.map((item) => {
            return (
              <Route
                key={item.path}
                path={item.path}
                component={item.component}
              ></Route>
            )
          })}
        </Suspense>
      </div>
    )
  }
}
